<template>
  
  <div class="result">
    
    <div class="top-top">
      <el-button @click="back">
        <template #icon>
          
          <iconBackone></iconBackone>
        </template>返回作业详情
      </el-button>
    </div>
    <el-card class="box-card" style="margin-top: 1%;">
    <template #header>
      <div class="card-header">
        <span></span>
        <el-button class="button" text><h1>总分 :</h1> <text style="margin-left: 15%;margin-top: 3%;font-size: 29px; color: #27B5F2;">{{ mark.totalPoints }}</text></el-button>
      </div>
    </template>
    <el-row :gutter="2">
    <el-col :span="3" style="margin-left: 15px;"><div class="grid-content ep-bg-purple" style="margin-top: 5%;"/>
      <h2 style="color: #606266;">AI测评分析 :</h2>
    </el-col>
    <el-col :span="18"><div class="grid-content ep-bg-purple" />
      <el-input
    v-model="mark.aiAnalyse"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder=""
      />
    </el-col>
  </el-row>
    
  </el-card>
    <div class="main">
      <div class="left">
        <div class="AIscore">AI评分:<span style="color:dodgerblue;margin-left: 10px;">{{ mark.aiScore }}分</span></div>
        <div class="score">AI建议</div>
          
    
        <div class="suggestInfo" style="overflow-wrap: break-word;margin-bottom: 10px;" >{{ mark.aiSuggest }}</div>
      </div>
      <div class="right">
        <div class="AIscore">教师评分:<span style="color:dodgerblue;"> {{ mark.teacherScore }}分</span></div>
        <div class="suggest">教师建议</div>
        <div class="teSuggest" style="overflow-wrap: break-word;">{{ mark.teacherSuggest }}</div>
      </div>
    </div>
    
    
    
  </div>
</template>
<script setup>
import iconBackone from '../../../assets/backone.vue';
import {useRouter,useRoute} from 'vue-router';
import { onMounted, ref } from 'vue';
import { getMarkAPI} from '../../../api/student/work'

const router=useRouter()
const {params,query}=useRoute()
const data = ref({
  taskId:Number(query.taskId),
})

const mark = ref({
  id:0,
  taskName:'',
  studentNum:0,
  studentName:'',
  teacherScore:0,
  teacherSuggest:'',
  aiAnalyse:'',
  aiSuggest:'',
  aiScore:0,
  totalPoints:0
})

onMounted(async()=>{
  
  let result = await getMarkAPI(data.value.taskId)
  console.info(result.data.data)
  mark.value=result.data.data
  console.info(mark.value)
})
const back=()=>{
  router.go(-1)
}
</script>
<style scoped>
.result{
  width: 100%;
  height: 100%;
  /* background-color: aqua; */
}
.top-top{
  padding-top: 1%;
}
.main{
  width: 100%;
  height: 88%;
  margin-top: 1%;
  /* background-color: rgba(255, 228, 196); */
  /* border: 1.5px solid rgba(77, 76, 76, 0.158); */
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
}
.left{
  width: 49.94%;
  height: 100%;
  float: left;
  /* background-color: rgb(189, 41, 189); */
  border-right: 1.5px solid rgba(77, 76, 76, 0.158);
}
.AIscore{
  width: 100%;
  height: 10%;
  /* background-color: aqua; */
  border-bottom: 1.5px solid rgba(77, 76, 76, 0.158);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.score{
  width: 100%;
  height: 10%;
  /* background-color: rgb(0, 255, 42); */
  border-bottom: 1.5px solid rgba(77, 76, 76, 0.158);
  display: flex;
  /* flex-direction: row; */
  align-items: center;
  justify-content: center;
}
.scoreInfo{
  width: 100%;
  height: 34.3%;
  /* background-color: rgb(255, 115, 0); */
  border-bottom: 1.5px solid rgba(77, 76, 76, 0.158);
  /* margin-right: 1em; */
}
.suggest{
  width: 100%;
  height: 10%;
  /* background-color: rgb(225, 0, 255); */
  border-bottom: 1.5px solid rgba(77, 76, 76, 0.158);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.suggestInfo{
  width: 100%;
  height: 35.1%;
}
.right{
  width: 49.94%;
  height: 100%;
  float: left;
}
.teSuggest{
  width: 100%;
  height: 79.5%;
}
</style>